<!--
* @Author: zhangjing
* @Date: 2025-06-05 17:58:40
* @Description: 心电详情=>
-->
<template>
	<div class="app-container home">
		<div class="topWrap">
			<div class="inner">
				<div></div>
				<div>
					<el-radio v-model="speedRatio" :label="item" v-for="(item, index) in speedList">{{ item }}倍速</el-radio>
				</div>
			</div>
			<div class="inner">
				<div>
					<span class="ml10">{{ patientInfo.id }}</span>
					<span class="ml10">{{ patientInfo.date }}</span>
					<span class="ml10">同步</span>
				</div>
				<div style="padding-left: 60px" v-if="batchCode">
					<template v-if="batchList.length > 0">
						<span style="margin: 0 10px">选择测量时间</span>
						<el-radio :disabled="play" @change="changeBatch" v-model="batchCode" :label="item" v-for="(item, index) in batchList">{{ item }}</el-radio>
					</template>
					<el-button @click="pause" type="danger" v-if="play">暂停</el-button>
					<template v-else>
						<el-button @click="start" type="primary" :loading="loading" v-if="alllist.length == 0">开始</el-button>
						<template v-else>
							<el-button type="warning" @click="read">心电图判读</el-button>
							<el-button @click="start" type="primary">继续</el-button>
						</template>
					</template>
				</div>
			</div>
		</div>
		<div class="ecgbox">
			<div class="inner">
				<div>
					<ecg ref="ecg" :height="280" :width="1000" :tip="true" :ecgData="ecgData"></ecg>
				</div>
				<div>
					<DWTEcg ref="DWTEcg" :height="200" :width="1000" :tip="true" :ecgData="DWTData"></DWTEcg>
				</div>
				<div>
					<AIecg ref="AIecg" :height="200" :width="1000" :tip="true" :ecgData="AIecgData"></AIecg>
				</div>
				<div>
					<AIecg ref="AIecg" hasBeat :height="200" :width="1000" :tip="true" :ecgData="AIecgData"></AIecg>
				</div>
			</div>
		</div>
		<el-dialog title="心电图判读" :visible.sync="dialogVisible" width="800">
			<el-form ref="ruleForm" label-width="80px" :rules="rules" :model="heartbeat">
				<el-form-item label="医生" prop="doctor">
					<el-input v-model="heartbeat.doctor" placeholder="医生姓名"></el-input>
				</el-form-item>
				<el-form-item label="批注" prop="verdict">
					<el-input type="textarea" placeholder="批注内容" v-model="heartbeat.type"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="save">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="切换数据" :visible.sync="dialogDataVisible" width="800">
			<el-form ref="ruleForm" label-width="80px" :rules="rules" :model="heartbeat">
				<el-form-item label="日期" prop="date">
					<el-date-picker @change="getPatients" value-format="yyyy-MM-dd" v-model="dataForm.date" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
				</el-form-item>
				<el-form-item label="患者" prop="verdict">
					<el-radio v-for="(item, index) in patientList" :key="index" v-model="patient" :label="index" border>{{ item.id }}</el-radio>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogDataVisible = false">取 消</el-button>
				<el-button :disabled="patientList.length == 0" type="primary" @click="savePatient">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import Ecg from '@/components/ecg.vue';
import DWTEcg from '@/components/DWTEcg.vue';
import AIecg from '@/components/AIecg.vue';
import { getHeartbeatList, saveAnnotation, getBatchList, getPatients } from '@/api/ecgManage/heartbeat';
let timer = null;
export default {
	name: 'Index',
	data() {
		return {
			code: '',
			hasSync: false,
			play: false,
			currentPageNum: 1,
			alllist: [],
			hasMore: false,
			loading: false,
			ecgData: [],
			DWTData: [],
			AIecgData: [],
			dialogVisible: false,
			dialogDataVisible: false,
			heartbeat: {
				doctor: '',
				verdict: ''
			},
			rules: {
				doctor: [
					{
						required: true,
						message: '请输入医生姓名',
						trigger: 'blur'
					}
				],
				type: [
					{
						required: true,
						message: '请输入批注内容',
						trigger: 'blur'
					}
				]
			},
			batchList: [],
			batchCode: '',
			isFirst: true,
			dataForm: {
				date: null
			},
			speedRatio: 1,
			speedList: [1, 2, 3],
			patient: 0,
			patientList: [],
			patientInfo: {}
		};
	},
	components: {
		Ecg,
		DWTEcg,
		AIecg
	},
	created() {
		// this.getHeartbeatList();
		// let code = sessionStorage.getItem('syncCode');
		// if (code) {
		// 	this.hasSync = true;
		// 	this.code = code;
		// 	//获取批次号
		// 	this.getBatchList(code);
		// }
	},
	destroyed() {
		clearInterval(timer);
		timer = null;
	},
	methods: {
		reback() {
			this.hasSync = false;
			sessionStorage.setItem('syncCode', '');
			this.code = '';
			this.play = false;
			this.isFirst = true;
			this.hasMore = true;
			this.currentPageNum = 1;
			this.ecgData = [];
			this.DWTData = [];
			this.AIecgData = [];
			this.alllist = [];
		},
		syncCode(info) {
			this.hasSync = true;
			this.code = info.code;
			this.patientInfo = {
				id: info.username,
				date: info.date
			};
			// sessionStorage.setItem('syncCode', code)
			//获取批次号
			this.getBatchList(this.code);
		},
		changeBatch() {
			this.hasMore = true;
			this.currentPageNum = 1;
			this.ecgData = [];
			this.DWTData = [];
			this.AIecgData = [];
		},
		async start() {
			this.isFirst = false;
			if (!this.hasMore) {
				this.hasMore = true;
				this.currentPageNum = 1;
				this.ecgData = [];
				this.DWTData = [];
				this.AIecgData = [];
				this.alllist = [];
			}
			if (this.alllist.length == 0) {
				await this.getHeartbeatList();
			}
			this.play = true;
			this.draw();
		},
		draw() {
			if (this.play) {
				window.requestAnimationFrame(this.draw);
				if (this.alllist.length < 5 * 125 && this.hasMore && !this.loading) {
					console.log('需要加载吗', this.alllist);
					this.currentPageNum++;
					this.getHeartbeatList();
				}
				if (this.alllist.length == 0) {
					this.play = false;
				} else {
					let data = this.alllist.splice(0, this.speedRatio);
					let ecgData = this.ecgData;
					let DWTData = this.DWTData;
					let AIecgData = this.AIecgData;
					console.log('data', data);
					data.forEach(item => {
						ecgData.push(item.ecg * 250);
						DWTData.push(item.dwt_ECG * 250);
						AIecgData.push({
							data: item.denoised_ECG * 250,
							beat_type: item.beat_type
						});
					});

					this.ecgData = ecgData.slice(-5 * 125);
					this.DWTData = DWTData.slice(-5 * 125);
					this.AIecgData = AIecgData.slice(-5 * 125);
					console.log('this.ecgData', this.ecgData.length);
				}
			}
		},
		pause() {
			this.play = false;
		},
		getHeartbeatList() {
			this.loading = true;
			return getHeartbeatList({
				currentPageNum: this.currentPageNum,
				size: 5 * 125,
				batch_num: this.batchCode
			}).then(da => {
				this.alllist = [...this.alllist, ...da.data.contentData];
				this.hasMore = da.data.totalPages > this.currentPageNum;
				console.log('da', da, this.hasMore);
				this.loading = false;
			});
		},
		read() {
			this.dialogVisible = true;
			this.$nextTick(() => {
				this.$refs.ruleForm.resetFields();
			});
		},
		save() {
			this.$refs.ruleForm.validate(valid => {
				if (valid) {
					saveAnnotation({
						...this.heartbeat,
						batch_num: this.batchCode
					}).then(da => {
						console.log('');
						this.dialogVisible = false;
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		getBatchList(code) {
			getBatchList(code).then(da => {
				console.log('da', da);
				this.batchList = da.data;
				this.batchCode = this.batchList[0];
			});
		},
		showDialogData() {
			this.dataForm.date = null;
			this.patientList = [];
			this.dialogDataVisible = true;
		},
		getPatients() {
			this.patientList = [];
			if (this.dataForm.date) {
				getPatients(this.dataForm.date).then(da => {
					this.patientList = da.data;
				});
			}
		},
		//选择病人
		savePatient() {
			this.patientInfo = {
				...this.patientList[this.patient],
				date: this.dataForm.date
			};
			this.dialogDataVisible = false;
			this.batchList = JSON.parse(this.patientInfo.batch_num);
			this.batchCode = this.batchList[0];
			this.hasSync = true;
			this.play = false;
			this.hasMore = true;
			this.currentPageNum = 1;
			this.ecgData = [];
			this.DWTData = [];
			this.AIecgData = [];
			this.alllist = [];
		}
	}
};
</script>

<style scoped lang="scss">
.home {
	height: calc(100vh - 100px);
	display: flex;
	flex-direction: column;
	padding: 0;

	.topWrap {
		.inner {
			padding: 20px 20px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 1010px;
			margin: 0 auto;
		}

		.inner + .inner {
			padding-bottom: 20px;
		}
	}

	.ecgbox {
		flex: 1;
		min-height: 0;
		overflow: auto;

		.inner {
			width: 1010px;
			margin: 0 auto;
		}
	}
}
</style>
